<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'资金明细'}"></header-top>
		
		<u-datetime-picker :show="show" v-model="value1" @confirm="confirm" @cancel="show = false" mode="date"></u-datetime-picker>
		<view class="mainpadding">
			<view class="maincolor flexleft" @click="showtime">
				<text>{{timevalue==""?"全部":timevalue}}</text>
				<view class="timeicon2"></view>
			</view>
			<view class="flexleft margin_top smalltext">
				<text>总提现金额：</text>
				<text class="color1">{{count.zong}}元</text>
				<text>年提现金额：</text>
				<text class="color2">{{count.nian}}元</text>
			</view>
		</view>
		<view class="ffffff">
			<view class="mainpadding itemdetail" v-for="item in list.data" :key="item">
				<view class="flexbetween">
					<view class="left">
						<view class="strongtext">{{item.type==1?"1级返佣":(item.type==2?"2级返佣":(item.type==3?'提现':'提现退还'))}}</view>
						<view class="paytime">{{item.createtime | formatDate('-')}}</view>
					</view>
					<view class="right">
						<view :class="item.addtype==1?'maincolor':'reduce'">{{item.addtype==1?"+":"-"}}{{item.money}}</view>
						<view class="paytime">{{item.addtype==1?"入账":'出账'}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				value1:new Date(),
				timevalue: "", //选择的日期
				show: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				count: {
					zong: "",
					nian: ""
				}
			}
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {},
		methods: {
			// 热门推荐列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/employeesapi/user/getUserMoneyLog', 'GET', {
					page: page || 1,
					limit: this.limit,
					date: this.timevalue,
					type:1,//1:资金明细，2：佣金明细，3：提现明细
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							this.count = resList.count
							_this.list.data = dataList.data.concat(resList.list.data);
						} else {
							this.count = resList.count
							_this.list.data = resList.list.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getdetail() {
				httpRequest.request('appapi/staff/user/moneyLog', 'POST', {}).then(res => {
					this.userinfo = res.data.info
					this.upImg.push(res.data.info.avatar)
				})
			},
			showtime() {
				this.show = true
			},
			// 时间选择点击确定
			confirm(e) {
				this.show = false
				// this.timevalue = this.date(e.value)
				console.log(e.value)
				this.init()
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
		}
	}
</script>

<style lang="scss" scoped>
	.smalltext {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.color1 {
		color: #FFC741;
		margin-right: 30rpx;
	}

	.left {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
	}

	.paytime {
		margin-top: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.right {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		flex-direction: column;
	}

	.strongtext {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.itemdetail {
		border-bottom: 1rpx solid #EBEBEB;
	}

	.itemdetail:last-child {
		border-bottom: none;
	}

	.reduce {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF516E;
	}
</style>
